<template>
	<div class="recommend_video">
		<div class="title">
			<h2>熱門推薦</h2>
			<span class="more" @click="toPage('/#/home/SandSculpture')">
				<span>{{ $t('more') }}</span>
				<el-icon><ArrowRight /></el-icon>
			</span>
		</div>
		
		<div class="main">
			<div class="main_item" v-for="item in dataList.slice(0,6)" :key="item.id" @click="toPage('/#/home/SandSculptureMain?id='+item.id)">
				<div class="cover">
					<img :src="$baseUrl+item.theater_img" alt="">
					<div class="tag" v-if="item.is_free == 1">免費</div>
					<div class="tagVip" v-if="item.is_free !== 1 && item.is_free !== 2 && item.is_pay != 1">付費</div>
					<div class="tagVip isPay" v-if="item.is_pay == 1">已購買</div>
					<div class="episode">{{item.sum_episode}}集全</div>
					<div class="sum_time">{{formatDuration(item.sum_time)}}</div>
					<!-- <div class="looks">151人觀看</div> -->
				</div>
				<div class="v-title">{{item.theater_name}}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	defineProps(['dataList'])
	const toPage = (url)=>{
		window.top.location.href = "//" + window.location.hostname + url
		window.top.location.reload()
	}
	const formatDuration = (seconds) => {
		seconds = Number(seconds);
		if (isNaN(seconds) || seconds < 0) return '00:00';
	
		const h = Math.floor(seconds / 3600);
		const m = Math.floor((seconds % 3600) / 60);
		const s = seconds % 60;
	
		const pad = (n) => String(n).padStart(2, '0');
	
		if (h > 0) {
			return `${pad(h)}:${pad(m)}:${pad(s)}`;
		} else {
			return `${pad(m)}:${pad(s)}`;
		}
	};
</script>

<style lang="less" scoped>
	.recommend_video{
		width: 100%;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			h2{
				color: white;
				font-size: 20px;
				margin: 0;
			}
			.more{
				font-size: 12px;
				color: #ffffffdb;
				position: absolute;
				right: 0;
				top: 3px;
				border: 1px solid rgb(255 255 255 / 67%);
				height: 22px;
				line-height: 22px;
				padding: 0 7px;
				border-radius: 6px;
				cursor: pointer;
				display: flex;
				align-items: center;
			}
			.more:hover{
				background-color: #515151;
			}
		}
		
		.main{
			margin-top: 10px;
			padding-bottom: 20px;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
			gap: 10px;
			row-gap: 20px;
			.main_item{
				width: 100%;
				// height: 200px;
				border-radius: 10px 10px 0 0;
				overflow: hidden;
				cursor: pointer;
				.cover{
					width: 100%;
					aspect-ratio: 1/1.3;
					// background-image: url(https://www.yyfuns.com/static/hzw2.jpg);
					background-size: cover;
					background-repeat: no-repeat;
					border-radius: 12px;
					background-color: #f0f0f0;
					position: relative;
					transition: background-image 0.3s ease;
					background-position: center;
					width: 150px;
    				height: 200px;
					overflow: hidden;
					img{
                        width: 100%;
                        height: 100%;  // 新增
                        object-fit: cover; // 新增(保持比例填充)
                        border-radius: 12px;
                        transition: all .3s;
                    }
					.tag{
						background:linear-gradient(to right, #adf4cc, #60e8a1);
						display: inline-block;
						position: absolute;
						right: 0;
						top: 0;
						padding: 2px 10px;
						border-radius: 0 10px 0 10px;
						font-size: 12px;
					}
					.tagVip{
						background:linear-gradient(to right, #fce7b4, #fab660);
						display: inline-block;
						position: absolute;
						right: 0;
						top: 0;
						padding: 2px 10px;
						border-radius: 0 10px 0 10px;
						font-size: 12px;
					}
					.isPay{
						background: linear-gradient(to right, #b4e7fc, #60cdfa);
					}
					.episode{
						color: white;
						position: absolute;
						bottom: 5px;
						right: 5px;
						font-weight: bold;
						font-size: 12px;
						filter: drop-shadow(2px 4px 6px black);
					}
					.looks{
						color: white;
						position: absolute;
						top: 3px;
						left: 5px;
						font-weight: bold;
						font-size: 10px;
						filter: drop-shadow(2px 4px 6px black);
					}
					.sum_time{
						color: white;
						position: absolute;
						bottom: 5px;
						left: 5px;
						// font-weight: bold;
						font-size: 12px;
						filter: drop-shadow(2px 4px 6px rgb(117, 117, 117));
					}
				}
				.cover:hover{
                    img{
                        transform: scale(1.05);
                    }
                }
				.v-title{
					margin-top: 5px;
					width: 100%;
					text-overflow: ellipsis;
					white-space: normal;
					overflow: hidden;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 15px;
					color: white;
				}
			}
		}
	}
</style>